<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位的堆叠顺序</title>
    <!--
    特点：
    1。数值可以是正整数、负整数或0，默认auto，数值越大，盒子越靠上
    2。如果属性值相同，则按照书写顺序，后来居上
    3。数字后面帮你加单位
    4。只有定位点盒子才有z-index属性
    -->
    <styl1e>
        .box {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        }

        .xiongda {
        background-color: red;
            z-index: 1;
        }

        .xionger {
            background-color: green;
        left: 50px;
        top: 50px;
        z-index: 2;
        }

        .qiangge {
        background-color: blue;
        left: 100px;
        top: 100px;
        }
    </styl1e>
</head>
<body>
<div class="box xiongda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box qiangge">光头强</div>
</body>
</html>